<template>
	<view class="personList_con">
		<view class="top_con">
			<view class="title">创建医生档案</view>
			<view class="remark">
				<image src="/static/images/title_icon.png"></image>
				档案信息严格保密，仅您自己可见</view>
		</view>
		<view class="userInfo_con">
			<view class="guid">
				<view class="left">
					<span>*</span>姓名
				</view>
				<view class="input">
					<u-input border="surround"	type="number" v-model="form.name"	:border="false"></u-input>
				</view>
			</view>
			<view class="guid">
				<view class="left">
					<span>*</span>身份证号
				</view>
				<view class="input">
					<u-input border="surround"	type="number" v-model="form.card"	:border="false"></u-input>
				</view>
			</view>
			<view class="guid">
				<view class="left">
					<span>*</span>手机号
				</view>
				<view class="input">
					<u-input border="surround"	type="number" v-model="form.docPhone" :border="false"></u-input>
				</view>
			</view>
			<view class="down_con">
				<view class="left">
					<span>*</span>医师资格证
				</view>
				<view class="upload">
					<u-upload
					    :fileList="fileList1"
					    @afterRead="afterRead"
					    @delete="deletePic"
					    name="1"
					    multiple
					    :maxCount="10"
					  ></u-upload>
				</view>
			</view>
			<view class="down_con">
				<view class="left">
					<span>*</span>执业证
				</view>
				<view class="upload">
					<u-upload
					    :fileList="fileList2"
					    @afterRead="afterRead2"
					    @delete="deletePic2"
					    name="1"
					    multiple
					    :maxCount="10"
					  ></u-upload>
				</view>
			</view>
		</view>
		<view class="btn_con">
			<span>提交档案</span>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{},
				fileList1: [],
				fileList2: [],
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
			  this[`fileList${event.name}`].splice(event.index, 1);
			},
			deletePic2(event) {
			  this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
			  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			  let lists = [].concat(event.file);
			  let fileListLen = this[`fileList${event.name}`].length;
			  lists.map((item) => {
			    this[`fileList${event.name}`].push({
			      ...item,
			      status: "uploading",
			      message: "上传中",
			    });
			  });
			  for (let i = 0; i < lists.length; i++) {
			    const result = await this.uploadFilePromise(lists[i].url);
			    let item = this[`fileList${event.name}`][fileListLen];
			    this[`fileList${event.name}`].splice(
			      fileListLen,
			      1,
			      Object.assign(item, {
			        status: "success",
			        message: "",
			        url: result,
			      })
			    );
			    fileListLen++;
			  }
			},
			async afterRea2(event) {
			  // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			  let lists = [].concat(event.file);
			  let fileListLen = this[`fileList${event.name}`].length;
			  lists.map((item) => {
			    this[`fileList${event.name}`].push({
			      ...item,
			      status: "uploading",
			      message: "上传中",
			    });
			  });
			  for (let i = 0; i < lists.length; i++) {
			    const result = await this.uploadFilePromise2(lists[i].url);
			    let item = this[`fileList${event.name}`][fileListLen];
			    this[`fileList${event.name}`].splice(
			      fileListLen,
			      1,
			      Object.assign(item, {
			        status: "success",
			        message: "",
			        url: result,
			      })
			    );
			    fileListLen++;
			  }
			},
			uploadFilePromise(url) {
			  return new Promise((resolve, reject) => {
			    let a = uni.uploadFile({
			      url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
			      filePath: url,
			      name: "file",
			      formData: {
			        user: "test",
			      },
			      success: (res) => {
			        setTimeout(() => {
			          resolve(res.data.data);
			        }, 1000);
			      },
			    });
			  });
			},
			uploadFilePromise2(url) {
			  return new Promise((resolve, reject) => {
			    let a = uni.uploadFile({
			      url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
			      filePath: url,
			      name: "file",
			      formData: {
			        user: "test",
			      },
			      success: (res) => {
			        setTimeout(() => {
			          resolve(res.data.data);
			        }, 1000);
			      },
			    });
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.personList_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		padding: 22rpx 29rpx;
		font-family: PingFang SC, PingFang SC;
		.top_con{
			margin-bottom: 30rpx;
			padding: 10rpx 0;
			.title{
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				margin-bottom: 9rpx;
			}
			.remark{
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				image{
					width:26rpx;
					height:31rpx;
					margin-right: 12rpx;
				}
				
			}
		}
		.userInfo_con{
			background: #FFFFFF;
			border-radius: 6rpx;
			margin-bottom: 19rpx;
			padding: 25rpx 31rpx;
			.guid{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E4E4E4;
				display: flex;
				align-items: center;
				.left{
					display: flex;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					width:200rpx;
					span{
						color:#7D2527;
					}
				}
				.input{
					flex: 1;
				}
			}
			.down_con{
				padding: 29rpx 0;
				border-bottom: 1rpx solid #E4E4E4;
				.left{
					display: flex;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					width:200rpx;
					margin-bottom: 18rpx;
					span{
						color:#7D2527;
					}
				}
				.upload{
					margin-bottom: 21rpx;
				}
				.text{
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					margin-bottom: 10rpx;
				}
				.export{
					font-weight: 400;
					font-size: 30rpx;
					color: #7D2527;
				}
			}
		}
		.btn_con{
			position: fixed;
			bottom: 40rpx;
			padding: 0 29rpx;
			width:100%;
			left: 0;
			span{
				display: inline-block;
				width:100%;
				background: #7D2527;
				border-radius: 50rpx;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color:#fff;
			}
		}
	}
</style>